<template>
  <x-main>
    <view class="brief x-container x-normal-bottom">
      <view class="x-space-between">
        <view class="money">
          <template v-if="depositInfo.depositType == DEPOSIT.FREE">免押金</template>
          <template v-else>
            {{depositInfo.orderDeposit}}<text class="unit">元</text>
          </template>
        </view>
<!--        <view class="status">待处理</view>-->
      </view>
      <view class="desc x-small-top">
        押金、{{depositTypeDesc}}
      </view>
    </view>

    <view class="x-box" v-if="!$emptyArray(depositTravelRecords)">
      <x-box title="押金操作进度">
        <x-cell @click="onShowRecord" :title="firstTitle" :border="false" value="详情" titleWidth="540rpx" :desc="firstDesc" isLink></x-cell>
      </x-box>
    </view>

    <x-preview title="押金信息" :data="depositInfo" :columns="col"></x-preview>

    <x-popup title="押金操作进度" v-model="state.show">
      <x-record :list="depositTravelRecords"></x-record>
    </x-popup>
    <!-- 底部操作 -->
    <x-bottom>
      <!--免收押金-->
      <template v-if="depositInfo.depositType == DEPOSIT.FREE">
        <view class="note">
          <p>说明：</p>
          <p>1、本用户的押金类型为「免收押金」，在合约结束时，您可根据情况扣款。</p>
          <p>2、解约后，将无法再发起扣款，解约前请确保款项已扣除后再解约。</p>
        </view>
        <view class="x-space-between">
          <view :class="{btn: orderInfo.orderState == ORDER.KEY.FINISH, 'x-full': orderInfo.orderState != ORDER.KEY.FINISH}" @click="onOption" class="x-btn x-btn-plain-primary">押金退还/扣款</view>
          <view v-if="orderInfo.orderState == ORDER.KEY.FINISH" @click="onUnfreeze" class="x-btn x-btn-plain-primary btn">解约</view>
        </view>
      </template>

      <template v-if="depositInfo.depositType == DEPOSIT.FREEZE">
        <view class="note">
          <p>说明：</p>
          <p>1、收押金冻结的押金为{{depositInfo.orderDeposit}}元，您可根据情况退还押金。</p>
          <p>2、解约后，将无法再发起扣款，解约前请确保款项已扣除后再解约。解约限本订单，不影响该用户其他订单。</p>
        </view>
        <view class="x-space-between">
          <view @click="onOption" :class="{btn: orderInfo.orderState == ORDER.KEY.FINISH, 'x-full': orderInfo.orderState != ORDER.KEY.FINISH}" class="x-btn x-btn-plain-primary">押金扣款</view>
          <view v-if="orderInfo.orderState == ORDER.KEY.FINISH" @click="onUnfreeze" class="x-btn x-btn-plain-primary btn">解约</view>
        </view>
      </template>

      <template v-if="depositInfo.depositType == DEPOSIT.NORMAL">
        <view class="note">
          <p>说明：</p>
          <p>1、本用户的押金类型为「正常收取」，押金已收取到您进件的支付宝账户里，但系统无法从商家支付宝账号发起退押金，需要您线下处理。</p>
        </view>
        <view class="x-btn x-btn-plain-default">正常收取押金，无法做线上退押，请线下处理</view>
      </template>
    </x-bottom>
  </x-main>
</template>

<script setup>
import XPreview from '@/components/lib/preview'
import XPopup from '@/components/lib/popup';
import XRecord from '@/components/logic/record';
import orderStore from '@/stores/modules/order'
import store from '@/stores/modules/deposit';
const DepositStore = store();
const OrderStore = orderStore();
const {depositInfo, depositTravelRecords} = storeToRefs(DepositStore);
const {orderInfo} = storeToRefs(OrderStore);
import {computed, reactive, ref} from "vue";
import {storeToRefs} from "pinia";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {Constant, Helper} from "core";

const col = ref([
  // {label: "押金", field: "orderDeposit", suffix: "元"},
  // {label: "押金类型", field: "depositType"},
  {label: "扣款金额", field: "refundAmount", format: (c, d) => {
    if(! Helper.empty(d) && ! Helper.empty(d.refundAmount)) {
      let str = d.refundAmount + "元";
      // if(d.deductDeposit > 0) {
      //   str += d.waitDeductDeposit ? "(扣款中)" : "(扣款成功)"
      // }
      return str;
    }
    return "-";
  }},
  {label: "押金付款日期", field: "payTime"},
  {label: "合约到期日期", field: "leaseEndDate"},
  {label: "用户姓名", field: "ownerName"},
  {label: "用户手机号", field: "ownerPhone"},
]);
const state = reactive({
  show: false,
  orderNo: "",
})

onLoad(e=>{
  state.orderNo = e.orderNo;
})

onShow(async () => {
  DepositStore.getInfo(state.orderNo);
  DepositStore.getOrderDepositTravel(state.orderNo);
})

const onUnfreeze = async () => {
  let isOk = DepositStore.unfreeze(state.orderNo);
}

const onOption = () => {
  uni.navigateTo({url: "/pages/deposit/option?orderNo=" + state.orderNo})
}

const depositTypeDesc = computed(() => {
  return DepositStore.formatType(depositInfo.value.depositType);
})

const firstTitle = computed(() => {
  let list = depositTravelRecords.value;
  if(! Helper.emptyArray(list)) {
    return list[0].desc;
  }
  return "";
});


const firstDesc = computed(() => {
  let list = depositTravelRecords.value;
  if(! Helper.emptyArray(list)) {
    return list[0].title;
  }
  return "";
});


const onShowRecord = () => {
  state.show = true;
}
</script>

<style scoped lang="less">
  .x-box {
    background-color: #ffffff;
    margin-bottom: 20rpx;
  }

  .brief {
    .money {
      font-size: 64rpx;
      color: @primary
    }

    .unit {
      font-size: 28rpx;
      color: @primary;
    }

    .status {
      font-size: 28rpx;
      color: @primary;
    }

    .desc {
      color: #999999;
      font-size: 28rpx;
    }
  }

  .note {
    margin-bottom: 10rpx;
    color: #999999;
    font-size: 24rpx;

    p{
      padding: 4rpx 0;
      box-sizing: border-box;
    }
  }

  .btn {
    width: 48%;
  }
</style>
